<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>register</title>
    <style>
        .login-content{
            width: 360px;
            margin: 0 auto;
            border:1px solid #999999;
            border-radius: 6px;
            text-align: center;
        }
        .item{
            margin-top: 40px;
            position: relative;
        }
        .item label{
            display: inline-block;
            width: 68px;
            text-align: right;
        }
        .item input{
            border-bottom: 1px solid #999;
            border-top: 1px solid transparent;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
            outline: none;
            font-size: 16px;
            color: #333333;
        }
        .btn{
            width: 100px;
            height: 40px;
            background-color: #56a5f1;
            color: #ffffff;
            border-radius: 6px;
            border: none;
            outline: none;
            cursor: pointer;
            margin-bottom: 50px;
        }
        .error{
            color: tomato;
            position: absolute;
            bottom: -21px;
            left: 120px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-content">
            <h1>欢迎注册</h1>
            <span>18888888888</span>
            <div class="item">
                <label for="">手机号</label>
                <input type="text" v-model="phone" v-on:blur="checkPhone" autofocus>
                <span class="error">{{phoneErr}}</span>
            </div>
            <div class="item">
                <label for="">输入密码</label>
                <input type="password" v-model="pwd" v-on:blur="checkPwd">
                <span class="error">{{pwdErr}}</span>
            </div>
            <div class="item">
                <label for="">确认密码</label>
                <input type="password" v-model="pwd1" v-on:blur="checkPwd1">
                <span class="error">{{pwd1Err}}</span>
            </div>
            <div class="item">
                <button class="btn" v-on:click="register">注册</button>
            </div>
        </div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                phone:'',
                pwd:'',
                pwd1:'',
                phoneErr:' ',
                pwdErr:' ',
                pwd1Err:' ',
                userArr:[],
            },
            methods: {
                register(){
                    if(this.phoneErr==''&&this.pwdErr==''&&this.pwd1Err==''){
                        let userInfo={
                            phone:this.phone,
                            pwd:this.pwd,
                        }
                        console.log(userInfo)
                        //userArr=localStorage.getItem('userInfo');
                        //根据localStorage的值，给userArr赋值，保证它是数组
                        if(localStorage.getItem('userInfo')){
                            //JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
                            userArr=JSON.parse(localStorage.getItem('userInfo'));
                        }else{
                            userArr=[];
                        }
                        userArr.push(userInfo);
                        //第一个数据是存储进去的名字，第二个数据是存储的真正的数据
                        //例存在：在页面检查--Application--Local Storage--file://下
                        localStorage.setItem('userInfo',JSON.stringify(userArr))
                        //location.href='./0319zhiling.html'
                    }else {
                        if(!(this.phoneErr=="")){
                            this.checkPhone();
                        }else if(!(this.pwdErr=="")){
                            this.checkPwd();
                        }
                        
                    }
                },
                //检查手机号：正则检查/^1\d{10}$/.test(15136047552)  =true
                checkPhone(){
                    if(!(/^1\d{10}$/.test(this.phone))){
                        this.phoneErr="手机号格式有误！";
                    }else{
                        this.phoneErr='';
                        //检查手机号是否已被注册，需要后端支持，以JQ为例
                        /*$.ajax ({
                            url:'xxxx',
                            type:'post',
                            data:{
                                pone:'xxxx',
                                xxxx:xxxx,
                            },
                            success:function(){

                            }
                        })*/
                    }
                },
                //检查密码
                checkPwd(){
                    if(this.pwd==''){
                        this.pwdErr="密码未填写!！";
                    } else if(!(this.pwd.length>=6)){
                        this.pwdErr="密码格式有误!！";
                    }else{
                        this.pwdErr='';
                    }
                },
                //再次检查密码
                checkPwd1(){
                    if (this.pwd1 && this.pwd1==this.pwd) {
                        this.pwd1Err = ''
                    } else {
                        this.pwd1Err='请确保两次输入一致'
                    }
                },
            },   
        })
    </script>
</body>
</html>